<template>
    <div class="ts-container-toolbar">
        <div class="ts-container-tooltip--left"></div>
        <div class="ts-container-tooltip--right">
            <div class="ts-container-tooltip--item">
                <el-popover placement="top" :width="360" trigger="click">
                    <template #reference>
                        <i-carbon-color-palette title="切换背景色" />
                    </template>
                    <div class="ts-flex-justify-between">
                        <div class="ts-vtk-background--item" v-for="(item, index) in state.backgroundColorList" :key="index"
                            @click="changeBackground(item)" :style="{ backgroundColor: item }" />
                    </div>
                </el-popover>
            </div>
            <div class="ts-container-tooltip--item">
                <el-tooltip class="box-item" effect="dark" content="截图" placement="top">
                    <i-carbon-drop-photo-filled @click="screenshot" />
                </el-tooltip>
            </div>
            <!-- <div class="ts-container-tooltip--item">
          <el-tooltip class="box-item" effect="dark" content="Single view" placement="top">
            <i-carbon-split-screen />
          </el-tooltip>
        </div> -->
        </div>
    </div>
</template>
   
<script setup>
import { ref } from 'vue'
import registerStore from '../../../stores/index'
import { hexToRGBFloat } from "../../../utils/transformColor";
const { toolModulePinia } = registerStore();
const state = ref({
    backgroundVisible: false,
    backgroundColorList: [
        '#ffffff',
        '#9e0142',
        '#d53e4f',
        '#fdae61',
        '#409EFF',
        '#abdda4',
        '#a5a7c5',
        '#394664',
        '#555555',
        '#787878'
    ],
})
const changeBackground = (rgb) => {
    toolModulePinia.changeBackground(hexToRGBFloat(rgb))
}

const screenshot = () => {
    toolModulePinia.screenshot()
}
</script>
   
<style  lang="scss">
.ts-container-toolbar {
    position: relative;
    color: white;
    font-size: 20px;
    display: flex;
    width: 100%;
    height: 40px;
    z-index: 999;
    left: 0;
    justify-content: space-between;
    background-color: #5c5c5c;
    align-items: center;
}

.ts-container-tooltip--right {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.ts-container-tooltip--item {
    padding: 5px 8px;
    cursor: pointer;
}

.ts-flex-justify-between {
    display: flex;
    justify-content: space-between;

    .ts-vtk-background--item {
        width: 25px;
        height: 25px;
        border: 1px solid #ddd;
        border-radius: 2px;
        cursor: pointer;
        position: relative;
    }
}
</style>